<template>
	<tinymce-editor
		:value="html"
		:init="{...init, ...options}"
		:placeholder="placeholder"
		@input="input"
	/>
</template>

<script>
	import TinymceEditor from "@tinymce/tinymce-vue";

	export default {
		props: {
			// 编辑器默认显示的内容，发生变化时会重新覆盖当前编辑器内容（不支持v-model,因为v-model会导致输入时编辑器内容重复渲染，使光标移入初始位置）
			value: {
				type: String,
				default: ""
			},
			// 自定义配置，优先级高于默认配置
			options: {
				type: Object,
				default: () => {}
			},
			// 提示
			placeholder: {
				type: String,
				default: "请输入..."
			}
		},
		components: {
			TinymceEditor
		},
		data() {
			return {
				html: "", // 编辑器当前显示的内容
				init: {
					language_url: "../../../modules/frame/static/tinymce/langs/zh_CN.js",
					language: "zh_CN",
					skin_url: "../../../modules/frame/static/tinymce/skins/oxide", //skin路径
					content_css: "../../../modules/frame/static/tinymce/skins/oxide/content.css",
					width: "100%",
					height: 200, //编辑器高度
					menubar: false, //顶部菜单栏显示
					statusbar: false, // 是否显示底栏
					plugins: "imageupload fullscreen placeholder",
					toolbar: "undo redo imageupload fullscreen"
				}
			};
		},
		watch: {
			value: {
				handler(val) {
					this.html = this.addPath(this.replaceDiv(val));
				},
				immediate: true
			}
		},
		methods: {
			// 编辑器输入内容变化
			input(value) {
				this.html = value;
				this.$emit("change", this.html);
			},
			// 把字符串中的div标签替换为p标签（此富文本编辑器会自动把传入的p标签单独换行，源码是扁平化的，但是如果有div可能会出现树状结构，难以解析）
			replaceDiv(str) {
				str= str.replace(/<div/g, "<p").replace(/\/div>/g, "/p>");
                str= str.replace(/&nbsp;/g, "");
                return str;
			},
			// 移除上传的文件前缀
			removePath(str) {
				return str
					.replace(/&amp;/g, "&")
					.split(Config.fileViewUrl)
					.join("");
			},
			// 添加上传的文件前缀
			addPath(str) {
				const re = /<img (.*?)src=['"](.*?)['"]/gi;
				let string = str;
				let temp;
				while ((temp = re.exec(str))) {
					let reStr = temp[0];
					let src = temp[2];
					string = string.replace(reStr, reStr.replace(src, src.startsWith("data:image") ? src : UrlUtil.getViewUrl(src)));
				}
				return string;
			},
            //扁平化数组
            flatten(arr) {
                return arr.reduce((prev, next) => {
                    return prev.concat(Array.isArray(next) ? this.flatten(next) : next);
                }, []);
            },
			// 获取编辑器当前去除文件地址前缀的显示内容
			api_getHtml() {
				return this.removePath(this.html);
			},
			// 获取当前显示内容以行为单位格式化的字符串列表
			api_getStringList() {
				// 把当前编辑器内容以行(p标签)的方式格式化成字符串列表
                const html = this.replaceDiv(this.api_getHtml());
				let $html = $("p,h1,h2,h3,h4,h5,h6", `<div>${html}</div>`);
				let list = [];
				$html.each(function() {
					let str = String($(this).html()); // 把每个p标签中的内容变成字符串
					let strArr = str.split("<br>"); // 把换行标签拆分成不同的列表元素
					strArr = strArr.map((i) => i.replace(/<(?!img).*?>/g, "")); // 去除其他标签信息，只保留img标签
					strArr = strArr.filter((i) => i !== ""); // 过滤掉无意义的空元素
					list.push(strArr);
				});
				return this.flatten(list);
			}
		}
	};
</script>
